<template>
	<view>
		<!--#ifdef APP-PLUS-->
		<view class="lz-status_bar">
			<view class="lz-top_view"></view>
		</view>
		<!--#endif-->
		<!-- #ifndef MP-WEIXIN -->
		<view class="kaoshi-head">
			<view class="kaoshi-head-top">
				<view class="kaoshi-head-left" @tap="$navigateBack">
					<view class="iconfont icon-zuojiantou"></view>
				</view>
				<view class="kaoshi-head-m">个人设置</view>
			</view>
		</view>
		<!--#endif-->
		<!-- #ifndef MP-WEIXIN -->
		<uni-list>
			<view class="setting-tx">
				<uni-list-item title="头像" :showArrow="false"></uni-list-item>
				<view><img :src="userinfo.user_id ? user_info.avatar : static_media.img01" @tap="getFaceimg" /></view>
			</view>
			<view class="setting-nc">
				<uni-list-item title="昵称" show-badge="true" :badge-text="user_info.nickname" @tap="show_modal = true">
				</uni-list-item>
			</view>
			<view @tap="show_changepwd = true" hover-class="none">
				<uni-list-item title="修改密码"></uni-list-item>
			</view>
		</uni-list>
		<view class="tuichu" @tap="logout">退出登录</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="seting_touxiang">
			<view class="t01">设置头像</view>
			<view class="t02">
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="avatar" :src="avatar ? avatar : '../../../static/img/txk.png'"></image>
				</button>
			</view>
		</view>
		<view class="seting_nc">
			<view class="n01">设置昵称</view>
			<view class="n02"><input type="nickname" v-model="nickname" @blur="changeName" placeholder="暂未设置"></view>
		</view>
		<view class="seting_nc">
			<view class="n01">设置简介</view>
			<view class="n02"><input type="text" v-model="info" placeholder="暂未设置"></view>
		</view>
		<view class="seting_button">
			<button :loading="isSubmit" type="primary" class="primary" form-type="submit" @tap="submit">提交修改</button>
		</view>
		<!-- #endif -->
		<view class="lz-modal" :class="{ 'lz-modal-show': show_modal }">
			<view class="lz-modal-dialog">
				<view class="lz-list">
					<view class="lz-list-header">
						<view>修改昵称</view>
						<view class="iconfont icon-cuo1" @tap="show_modal = false"></view>
					</view>
					<view class="lz-list-body">
						<view class="lz-list-item lz-list-item-middle">
							<view class="lz-list-line">
								<view class="lz-list-content lz-text__align--l">
									<input type="text" v-model="nickname" placeholder="请输入您的昵称" />
								</view>
							</view>
						</view>
						<button type="primary" class="primary" @tap="editUserInfo('nickname')">提交</button>
					</view>
				</view>
				<view class="lz-margin--b-md"></view>
			</view>
		</view>
		<view class="lz-modal" :class="{ 'lz-modal-show': show_changepwd }">
			<view class="lz-modal-dialog">
				<view class="lz-list">
					<view class="lz-list-header">
						<view>修改密码</view>
						<view class="iconfont icon-cuo1" @tap="show_changepwd = false"></view>
					</view>
					<view class="lz-list-body">
						<view class="lz-list-item lz-list-item-middle">
							<view class="lz-list-line">
								<view class="lz-list-content lz-text__align--l">
									<input type="text" password="true" v-model="password" placeholder="请输入您的密码，至少六位" />
								</view>
							</view>
						</view>
						<button type="primary" class="primary" @tap="changePwd('nickname')">提交</button>
					</view>
				</view>
				<view class="lz-margin--b-md"></view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	mapState
} from 'vuex'
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
export default {
	data() {
		return {
			user_info: [],
			show_modal: false,
			show_changepwd: false,
			nickname: '',
			info: '',//个人简介
			avatar: '',
			password: '',
			isnew: false,

		};
	},
	onLoad(opt) {
		if (opt.isnew) {
			this.isnew = ture
			setTimeout(() => {
				uni.showToast({
					title: '新用户 请修改昵称和头像',
					icon: 'none',
					mask: true
				})
			}, 1000);

		}
		this.get_user_info();
	},
	onShow() {
		wx.hideHomeButton();//隐藏home按钮

		// if (isnew) {

		// }

	},
	computed: {
		...mapState(['subject', 'userinfo']),
		static_media() {
			return {
				img01: this.$myConfig.localMedia + '/static/img/logo.png',
			}
		}
	},
	components: {
		uniList,
		uniListItem
	},
	methods: {
		async submit() {
			let str = this.nickname.trim();
			if (str.length == 0) {
				uni.showToast({
					title: '请输入合法的昵称',
					icon: 'none'
				})
				return
			}
			// if ((/[^/a-zA-Z0-9\u4E00-\u9FA5]/g).test(str)) {
			// 	uni.showToast({
			// 		title: '请输入中英文和数字',
			// 		icon: 'none'
			// 	})
			// 	return
			// }
			if (this.isSubmit) return
			this.isSubmit = true
			let res = await this.$myHttp.post({
				url: this.$myHttp.urlMap.userProfile,
				data: {
					nickname: this.nickname,
					avatar: this.avatar,
					info: this.info
				},
				needLogin: true
			})
			if (res.code == 1) {
				this.isSubmit = false
				//跳转我的页面
				uni.showToast({
					title: '修改成功',
					icon: 'success',
					mask: true
				})
				setTimeout(() => {
					uni.switchTab({ url: '/pages/my/index' })
				}, 1000);
			} else {
				this.isSubmit = false
				uni.showToast({
					title: res.msg == 'Nickname already exists' ? '昵称已存在' : res.msg,
					icon: 'none'
				})
			}
		},
		changeName(e) {
			this.nickname = e.detail.value;
			// console.log('this.nick_name.length',this.nickname.length);
		},
		onChooseAvatar(e) {
			let that = this
			this.avatar = e.detail.avatarUrl
			uni.uploadFile({
				url: that.$myConfig.api + 'api/common/upload?token=' + that.userinfo.token, //仅为示例，非真实的接口地址
				filePath: that.avatar,
				header: {
					token: that.userinfo.token
				},
				name: 'file',
				formData: {
					'user': 'test'
				},
				success: (uploadFileRes) => {
					if (uploadFileRes) {
						let res = JSON.parse(uploadFileRes.data);
						that.avatar = res.data.fullurl
						// that.editUserInfo('avatar');
					}
				}
			});
		},
		async get_user_info() {
			let res = await this.$myHttp.post({
				url: this.$myHttp.urlMap.userInfo,
				needLogin: true
			})
			if (res.code === 1) {
				this.user_info = res.data
				this.nickname = res.data.nickname
				this.avatar = res.data.avatar
				this.info = res.data.info
			}
			//
		},
		async logout() {
			const valid = await this.$myUserLogin.logout();
			if (valid) {
				uni.navigateTo({
					url: '/pages/auth/login/index'
				});
			} else {
				uni.showToast({
					icon: 'none',
					title: '退出登录失败'
				});
			}
		},
		getFaceimg() {
			let that = this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: function (chooseImageRes) {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					uni.uploadFile({
						url: that.$myConfig.api + 'api/common/upload?token=' + that.userinfo
							.token, //仅为示例，非真实的接口地址
						filePath: tempFilePaths[0],
						header: {
							token: that.userinfo.token
						},
						name: 'file',
						formData: {
							'user': 'test'
						},
						success: (uploadFileRes) => {
							if (uploadFileRes) {
								let res = JSON.parse(uploadFileRes.data);
								that.avatar = res.data.url
								that.editUserInfo('avatar');
							}
						}
					});
				}
			});
		},
		//
		async changePwd() {
			if (this.password != '' && this.password != undefined && this.password.length >= 6) {

			} else {
				this.$myUtils.$prompt.showToast({
					icon: 'none',
					title: '密码不符合要求'
				});
				return
			}
			let res = await this.$myHttp.post({
				url: this.$myHttp.urlMap.resetpwd,
				data: {
					newpassword: this.password
				},
				needLogin: true
			});
			if (res.code == 1) {
				uni.showToast({
					icon: 'success',
					title: '密码修改成功'
				})
				setTimeout(function () {
					uni.reLaunch({
						url: '/pages/auth/login/index?form_type=0'
					});
				}, 1000)

			}
		},
		async bindLogin() {
			/**
			 * 下面简单模拟下服务端的处理
			 * 检测用户账号密码是否在已注册的用户列表中
			 * 实际开发中，使用 uni.request 将账号信息发送至服务端，客户端在回调函数中获取结果信息。
			 */
			const data = {
				account: this.nickname,
				password: this.password
			};
			const valid = await this.$myUserLogin.login(data);
		},
		async editUserInfo(type) {
			let data = {}
			if (type == 'nickname') {
				if (this.nickname != '' && this.nickname != undefined) {
					data['nickname'] = this.nickname
				} else {
					this.$myUtils.$prompt.showToast({
						icon: 'none',
						title: '昵称不能为空'
					});
					return
				}
			} else if (type == 'avatar') {
				data['avatar'] = this.avatar
			}
			let res = await this.$myHttp.post({
				url: this.$myHttp.urlMap.editUserInfo,
				data: data,
				needLogin: true
			});
			if (res.code == 1) {
				if (type == 'nickname') {
					this.user_info.nickname = this.nickname
					this.$store.commit('setUserInfo', {
						userinfo: {
							...this.userinfo,
							nickname: this.nickname
						}
					});
					uni.showToast({
						icon: 'none',
						title: '修改成功'
					});
				} else if (type == 'avatar') {
					this.get_user_info();
					this.$store.commit('setUserInfo', {
						userinfo: {
							...this.userinfo,
							avatar: this.user_info.avatar
						}
					});
					uni.showToast({
						icon: 'success',
						title: '头像上传成功'
					})
				}

			}
			this.show_modal = false
		}
	}
};
</script>

<style>
page {
	background: #f6f7f9;
}

.kaoshi-head {
	border-bottom: none
}

.nc {
	position: relative;
	margin-right: 36px;
	margin-top: 12px;
}

.setting-tx {
	position: relative;
}

.setting-tx img {
	position: absolute;
	width: 32px;
	height: 32px;
	right: 21px;
	top: 7px;
	border-radius: 50%;
}

.lz-list-header {
	justify-content: space-between;
}

.tuichu {
	text-align: center;
	font-size: 16px;
	padding: 14px 0;
	color: #000;
	background: #fff;
	border-top: 12px solid #f6f7f9;
}

.lz-list-body {
	padding-bottom: 12px;
}

.lz-list-item .lz-list-line .lz-list-content {
	flex: 1;
	color: #000;
	font-size: 17px;
	line-height: 1.5;
	text-align: left;
	width: auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-top: 7px;
	padding-bottom: 7px;
	margin: 0 18px 12px;
}

.lz-list-body::before {
	border-bottom: none;
}

.lz-list-body::before {
	border-top: none;
}

.lz-modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 999;
	opacity: 0;
	outline: 0;
	text-align: center;
	transform: scale(1.185);
	backface-visibility: hidden;
	perspective: 1000px;
	background: rgba(0, 0, 0, .4);
	transition: all .3s ease-in-out 0s;
	pointer-events: none;
}

.lz-modal .lz-modal-dialog {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin-left: auto;
	margin-right: auto;
	width: 340px;
	max-width: 100%;
	background-color: #fff;
	border-radius: 10px;
	overflow: hidden;
}

.lz-modal::before {
	content: "\200B";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

.lz-list-header {
	display: flex;
	flex-direction: row;
	width: 90%;
	margin: 0 auto;
	padding: 17px;
	align-items: center;
}


.lz-list-header .icon-cuo1 {
	font-size: 17px;
	color: #9e9e9e;
}

.lz-modal.lz-modal-show {
	opacity: 1;
	transition-duration: .3s;
	transform: scale(1);
	overflow-x: hidden;
	overflow-y: auto;
	pointer-events: auto;
}

/*个人设置样式  小程序2.27.1新增*/
.seting_touxiang {
	padding: 0 5%;
	background: #fff;
	display: flex;
	align-items: center;
	border-bottom: #f2f2f2 solid 1px;
	height: 60px;
}

.seting_touxiang .t01 {
	flex: 1;
	font-size: 14px;
}

.seting_touxiang .t02 button::after {
	border: none;
}

.seting_touxiang .t02 button {
	padding-left: 0;
	padding-right: 0;
	line-height: 0;
	border-radius: 100px;
	overflow: hidden;
}

.seting_touxiang .t02 button image {
	width: 40px;
	height: 40px;
	display: block;
}

.seting_nc {
	padding: 0 5%;
	background: #fff;
	display: flex;
	align-items: center;
	height: 60px;
}

.seting_nc .n01 {
	flex: 1;
	font-size: 14px;
}

.seting_nc .n02 {
	flex: 1;

}

.seting_nc .n02 input {
	text-align: right;
	font-size: 14px;
}



.seting_button {
	width: 100%;
	margin-top: 18px;
	color: #fff;
}

.seting_button button::after {
	border: none;
	color: #fff;
}

.seting_button button {
	background: #3c7bfc !important;
	font-size: 16px;
}
</style>
